<template>
  <div class="top-page">
    <div class="animation-nav-box">
      <pageFrameRound />
      <role />
      <div class="center-box">
        <section class="button-box button-box-1">
          <itemButton
            :text="animationBtnSetting.button_1.title"
            @click="$store.dispatch('page/toogelPage',animationBtnSetting.button_1.component)"
          />
          <itemButton
            :text="animationBtnSetting.button_2.title"
            @click="$store.dispatch('page/toogelPage',animationBtnSetting.button_2.component)"
          />
        </section>
      </div>
      <div class="center-box">
        <section class="button-box button-box-2">
          <itemButton
            :text="animationBtnSetting.button_3.title"
            :active="true"
            @click="$store.dispatch('page/toogelPage',animationBtnSetting.button_3.component)"
          />
          <itemButton
            :active="true"
            :text="animationBtnSetting.button_4.title"
            @click="$store.dispatch('page/toogelPage',animationBtnSetting.button_4.component)"
          />
        </section>
      </div>
      <div class="slot-box">
        <slot />
      </div>
    </div>
    <pageFrame />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import role from './role.vue';
import itemButton from './button/index.vue';
import pageFrame from './page-frame.vue';
import pageFrameRound from './page-frame-round.vue';

export default {
  components: {
    itemButton,
    pageFrame,
    pageFrameRound,
    role,
  },
  data() {
    return {
      color: '',
    };
  },
  computed: {
    ...mapGetters(['nowAction', 'animationBtnSetting']),
  },
  methods: {
    loginHandler() {
      if (this.nowAction === 'login') {
        this.$store.dispatch('form/loginHandler');
      }
      this.$store.commit('form/TOOGEL_NOW_ACTION', 'login');
    },
    registerHandler() {
      if (this.nowAction === 'register') {
        this.$store.dispatch('form/registerHandler');
      }
      this.$store.commit('form/TOOGEL_NOW_ACTION', 'register');
    },
  },
};
</script>

<style lang="less" scoped>
@import '~@/styles/variables.less';

.top-page {
  width: 100vw;
  height: 100vh;
  .bg-mask {
    width: 100%;
    height: 100%;
    opacity: 0.3;
  }
}
.slot-box::before {
  content: '';
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 1px lighten(@navButton, 10%);
}
.animation-nav-box {
  display: inline-block;
  position: absolute;
  top: 55%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  .center-box {
    width: 233%;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    pointer-events: none;
    .button-box-1 {
      animation: top-page__scale-nav 0.3s ease 1.4s forwards,
        top-page__rotate-nav-1 0.5s ease 1.7s forwards;
    }
    .button-box-2 {
      animation: top-page__scale-nav 0.3s ease 1.4s forwards,
        top-page__rotate-nav-2 0.5s ease 1.7s forwards;
    }
  }
  .button-box {
    width: 200px;
    position: absolute;
    opacity: 0;
    display: flex;
    justify-content: space-between;
    transform-origin: center center;
    pointer-events: none;
  }
}

@keyframes top-page__scale-nav {
  0% {
    width: 0%;
    left: 50%;
    opacity: 1;
  }
  100% {
    width: 100%;
    left: 0;
    opacity: 1;
  }
}

@keyframes top-page__rotate-nav-1 {
  100% {
    transform: rotate(20deg);
  }
}
@keyframes top-page__rotate-nav-2 {
  100% {
    transform: rotate(-20deg);
  }
}
</style>
